<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="include.jsp" %>
<%
	boolean mini=SystemInfo.isMini(session);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta content="de" http-equiv="Content-Language">
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>fotoDB</title>
	<script type="text/javascript">
		function init(){
			var sortType=GetCookie('sortType');
			
			var select=document.getElementById('sortSelect');
			if (sortType=='0'){
				select.selectedIndex=0;
			}
			if (sortType=='1'){
				select.selectedIndex=1;
			}
			sort();
		}
		function init1(){
			var iframe=parent.window.document.getElementById('bodyFrame');
			if (iframe!=null){
				iframe.setAttribute('height',parseInt(getComputedStyle(document.body.parentNode).height)+500);
			}
		}
		function init2(){
			var resultFrame=this.parent.window.document.getElementById('resultFrame');
			resultFrame.setAttribute('height',parseInt(getComputedStyle(document.body.parentNode).height)+500);
		}

		function imgClick(nr) {
			var usr ="<%= session.getAttribute("usr")%>";
			if(usr == "benutzer") {
				 location = "<%=dbmode%>ImgInfoApp?action=showImage&bnr=" + nr;
			}else {
				alert("Sie m�ssen sich anmelden um Bildinformationen anzuzeigen!");
			}
		}
		
		function refreshStatistic(){
			document.getElementById('statisticForm').submit();
			document.getElementById('uploadingImageDiv').style.display='none';
			document.getElementById('main').style.display='block';
		}
		var loadCount=0;
		
		function loadCountRefresh(){
			loadCount++;
			var loadCountText=document.getElementById('loadCountText');
			loadCountText.value=loadCount+'/<c:out value="${Thumbs.size()}"/>';
			loadCountText.size=this.value.length+2;
		}
		function checkBoxMouseOver(div){
			div.childNodes[2].style.opacity=1;
		}
		function checkBoxMouseOut(div){
			if (div.childNodes[2].checked==false){
				div.childNodes[2].style.opacity=0.6;				
			}else{
				div.childNodes[2].style.opacity=1;
			}
		}
		
		function selectAll(checkBox){
			var boxs=document.getElementsByTagName('input');
			for (var i=0;i<boxs.length;i++){
				boxs[i].checked=checkBox.checked;
			}
			if (checkBox.checked==true){
				document.getElementById('labelSelectAll').innerHTML='Wählen Kein';
			}else{
				document.getElementById('labelSelectAll').innerHTML='Wählen Alle';
			}
		}
		
		function multiImageHandler(action){
			form=document.getElementById('multiImageHandler');
			if (action=='delete'){
				if (confirm('Really delete all selected pic?')){
					form.action='<%=dbmode%>ImgUpdateApp?action=deleteImage';
					form.submit();	
				}
			}
		}
		
		function tooltip(nr,parent){
			if (document.getElementById('tooltipDiv'+nr)==null){
				var iframe=document.createElement('iframe');
				var div=document.createElement('div');
				var randomnumber=Math.floor(Math.random()*100000);
				
				iframe.width=250;
				iframe.height=600;
				iframe.frameborder=0;
				iframe.name='tooltipFrame'+nr;
				iframe.id='tooltipFrame'+nr;
				iframe.src='<%=dbmode%>ImgInfoApp?action=tooltip&bnr='+nr+'&random='+randomnumber;
				iframe.style.scolling='no';
				
				div.id="tooltipDiv"+nr;
				div.style.position='absolute';
				if (parent.parentNode.offsetLeft<=500){
					div.style.left=140;
					div.style.top=-1;	
				}else{
					div.style.left=-230;
					div.style.top=-1;
				}
				
				div.style.zIndex=100;
				div.setAttribute('onmouseleave','this.parentNode.removeChild(this);');
				div.appendChild(iframe);
				parent.appendChild(div);
				
				
			}else{
				var div=document.getElementById('tooltipDiv'+nr);
				parent.appendChild(div);
				
			}
		}
		
		function getElementChildren(ele,tagName){
			if(!ele&&!ele.nodeType && ele.nodeType!==1){
				alert('arguments error!')
				return
			}
			var a=[]
			var children=ele.childNodes;
			if(tagName){
				if(typeof tagName!='string'){
					alert('arguments[1] is error!')
					return;
				}
				for(var i=0;i<children.length;i++){
					if(children.item(i).nodeType===1&&children.item(i).tagName.toLowerCase()==tagName.toLowerCase()){
						a.push(children.item(i));
					}
				}
			}else{
				for(var i=0;i<children.length;i++){
					if(children.item(i).nodeType===1){
					a.push(children.item(i))
					}
				}
			}
		return a;
		}
		
		
		function sort(){
			var select=document.getElementById('sortSelect');
			var ThumbsBlock=document.getElementById('ThumbsBlock');
			
			var newThumbsBlock=ThumbsBlock.cloneNode(false);
			var divs=getElementChildren(ThumbsBlock,'div');
			var length=divs.length;
			while(length>0){
				var temp=divs[0];
				for (var i=0;i<length;i++){
					if (select.selectedIndex==0){
						if (divs[i].getAttribute('name')<temp.getAttribute('name')){
							temp=divs[i];
						}	
					}
					if (select.selectedIndex==1){
						if (divs[i].getAttribute('nr')<temp.getAttribute('nr')){
							temp=divs[i];
						}
					}
					
				}
				
				newThumbsBlock.appendChild(temp);
				
				divs=getElementChildren(ThumbsBlock,'div');
				length=divs.length;
				
			}
			ThumbsBlock.parentNode.replaceChild(newThumbsBlock, ThumbsBlock);
			SetCookie('sortType',select.selectedIndex);
		}
		
		
		function GetCookieVal(offset)
		{
		var endstr = document.cookie.indexOf (";", offset);
		if (endstr == -1)
		endstr = document.cookie.length;
		return unescape(document.cookie.substring(offset, endstr));
		}
		function SetCookie(name, value)
		//设定Cookie值
		{
		var expdate = new Date();
		var argv = SetCookie.arguments;
		var argc = SetCookie.arguments.length;
		var expires = (argc > 2) ? argv[2] : null;
		var path = (argc > 3) ? argv[3] : null;
		var domain = (argc > 4) ? argv[4] : null;
		var secure = (argc > 5) ? argv[5] : false;
		if(expires!=null) expdate.setTime(expdate.getTime() + ( expires * 1000 ));
		document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires="+ expdate.toGMTString()))
		+((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain))
		+((secure == true) ? "; secure" : "");
		}
		function DelCookie(name)
		//删除Cookie
		{
		var exp = new Date();
		exp.setTime (exp.getTime() - 1);
		var cval = GetCookie (name);
		document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
		}
		function GetCookie(name)
		//获得Cookie的原始值
		{
		var arg = name + "=";
		var alen = arg.length;
		var clen = document.cookie.length;
		var i = 0;
		while (i < clen)
		{
		var j = i + alen;
		if (document.cookie.substring(i, j) == arg)
		return GetCookieVal (j);
		i = document.cookie.indexOf(" ", i) + 1;
		if (i == 0) break;
		}
		return null;
		}
		
		
		
		
		
		
		
		
		
	</script>
</head>
<body style="margin:0;padding:0;" onload="refreshStatistic();init();init1();init2();">
	<div id="content" align="center" style="position:relative">
		<c:if test="${Thumbs.size()==0}">
			<h3><strong>Kein Ergebnis!</strong></h3>
		</c:if>
		<c:if test="${Thumbs.size()>0}">
			<div id="uploadingImageDiv" style="position:absolute;left:500;top:150">
				<p><img src="images/<%=dbmode%>loading.gif"/></p>
				<p><input id="loadCountText" type="text" style="border:0px;width:40px" readOnly="readonly" value="0/<c:out value="${Thumbs.size()}"/>"/></p>
			</div>
		</c:if>
		<div id="main" style="display:none">
			<div id="thumbs_title"><c:out value="${title}"/></div>
			<c:if test="${Thumbs.size()>0}">
				<form id="statisticForm" method="post" action="StatisticApp?action=show&type=thumb" target="statisticFrame">
				</form>
			<c:if test="${!mini}">
				<iframe id="statisticFrame" name="statisticFrame" width="100%" height="60px" src="" frameborder="0" scrolling="no"></iframe>
			</c:if>
			<div style="position:relative" align="justify">
				<div style="width:400px;border:none;display:inline">
					<input id="selectAllBox" type="checkBox" style="margin-left:20px" onchange="selectAll(this)"/>
					<label id="labelSelectAll" for="selectAllBox" style="width:100px">Wählen Alle</label>
					<input type="button" value="Delete" onclick="multiImageHandler('delete')"/>
				</div>					
				<div style="display:inline;position:absolute;right:50px">
					<label>
						Sotieren nach
					</label>
					<select id="sortSelect" onchange="sort()">
						<option>Name</option>
						<option>Upload Time</option>
					</select>
				</div>
			</div>
			</c:if>
			<form id="multiImageHandler" method="post">
			<div id="ThumbsBlock">
			<c:forEach var="thumb" items="${Thumbs}">
				<div style="position:relative;" nr="<c:out value="${thumb.nr}"/>" name="<c:out value="${thumb.name}"/>">
					<div class="thumb" style="background-color:#EDF0FE;position:relative">
						<a href="<%=dbmode%>ImgInfoApp?action=showImage&bnr=<c:out value="${thumb.nr}"/>" style="display:block"  onmouseenter="tooltip(<c:out value="${thumb.nr}"/>,this)" onmouseleave="this.removeChild(document.getElementById('tooltipDiv'+<c:out value="${thumb.nr}"/>));">
						<c:if test="${mini}">
							<img name="thumb" width="160" height="120" onload="loadCountRefresh();" src="images/secret.jpg" />
						</c:if>
						<c:if test="${!mini}">
							<img name="thumb" width="160" height="120" onload="loadCountRefresh();" src="<%=dbmode%>ImgShowApp?type=thumb&bnr=<c:out value="${thumb.nr}"/>" />
						</c:if>
						</a>
					<div style="border:none;text-overflow:ellipsis" >
						<label for="checkBox<c:out value="${thumb.nr}"/>" style="color:#000;opacity:0.8"><c:out value="${thumb.name}"/></label>
						<input id="checkBox<c:out value="${thumb.nr}"/>" name="bnr" type="checkBox" value="<c:out value="${thumb.nr}"/>" style="float:right;margin-right:5px;margin-top:5px;opacity:0.8"/>
					</div>
					</div>
				</div>
			</c:forEach>
			</div>
			</form>
		</div>
	</div>
</body>
</html>